<template>
    <div>
        <flexbox justify="flex-end" class="btn-group header-btn" v-if="!disabled">
            <a-button @click="handleSave(3, '否')" v-if="showNotPassBtn">驳回</a-button>
            <a-button type="primary" @click="handleSave(3, '是')">通过</a-button>
        </flexbox>
        <a-form layout="inline" :model="form">
            <a-row>
                <a-col :span="16">
                    <a-form-item label="当前阶段" :span="24">
                        <div class="font-w-b">{{ stage }}</div>
                    </a-form-item>
                </a-col>
                <a-col :span="16">
                    <a-form-item label="审核意见">
                        <div style="width: 100%">
                            <span style="white-space: pre-wrap" v-html="form.opinion" v-if="disabled" />
                            <a-textarea v-model:value="form.opinion" showCount :maxlength="500" auto-size v-else />
                        </div>
                    </a-form-item>
                </a-col>
                <a-col :span="16" v-if="stepStatus !== 'teamLeaderAduit'">
                    <a-form-item label="需求文档">
                        <file-cell :fileList="form.files" v-if="disabled" />
                        <upload-cell :fileParams="{ connectType: '需求文档', type: 1 }" :fileList="form.files" @valueChange="fileChange" v-else />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script lang="ts">
import UploadCell from '@/components/UploadCell/index.vue';
import FileCell from '@/components/FileCell/index.vue';
import { defineComponent, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'StartProcess',
    components: {
        UploadCell,
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        stepStatus: { type: String, default: '' },
        disabled: { type: Boolean, default: false },
        stage: { type: String, default: '' }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const state = reactive<any>({
            rules: {},
            form: {
                opinion: '',
                pass: '',
                files: []
            }
        });
        // 是否显示否按钮
        const showNotPassBtn = computed(() => {
            //自研
            if (props.detail.processType === '2') {
                const status = ['productChange'];
                return !status.includes(props.stepStatus);
            } else {
                const status = ['productManagerReview', 'productChange'];
                return !status.includes(props.stepStatus);
            }
        });
        const handleSave = (type: number, pass: string) => {
            state.form.pass = pass;
            emit('save', {
                type,
                query: {
                    ...state.form
                }
            });
        };
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            state.form.files = [...fileList];
        };
        const init = () => {
            Object.keys(state.form).forEach((key) => {
                if (key === 'files') {
                    if (props.detail.files.length) {
                        state.form.files = props.detail.files.filter((item) => item.connectType === '需求文档');
                    }
                } else {
                    state.form[key] = props.detail[key];
                }
            });
        };
        init();
        return {
            ...toRefs(state),
            showNotPassBtn,
            handleSave,
            fileChange
        };
    }
});
</script>

<style scoped lang="less">
@import './styles/index.less';
</style>